<template>
	<!-- 我的话题 -->
	<view style="background-color: #FFFFFF;">


		<mescroll-uni  v-show="dataList.length >0"  :height="height+'px'" @init="mescrollInit" :down="downOptions" :up="upOptions"
						@up="upBack" @down="downBack" >

			<!-- 话题 -->
			<view class="category_parent_box" v-for="(item, index) in dataList" :key="index" @click="toTopicDetail(item.id)">

				<view class="category_box">

					<view class="admin_type_box">
						<image class="admin_type" v-if="item.memberType==0" src="/static/icon/topic/type_m.png" />
						<image class="admin_type" v-if="item.memberType==1" src="/static/icon/topic/type_a.png" />
						<image class="category_image" :src="item.cover" mode="aspectFill"></image>
					</view>

					<view class="category_info_box">
						<text class="category_title"> {{item.name}}</text>
						<view class="category_count">
							{{item.memberCount}} {{item.memberNickname}}
						</view>
					</view>
				</view>

				<u-line style="margin-top: 10px;"></u-line>
			</view>
		</mescroll-uni>


		<no-data v-if="dataList.length < 1" :show-text="getNoDataText()" :height="height" icon="/static/bg/cat_qz.png"
			:iconMarginTop="100">
		</no-data>

		<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		components: {
			NoData
		},
		props: {
			typeId: {
				type: String,
				default () {
					return ''
				}
			},
			height: {
				type: Number,
				default () {
					return null
				}
			}
		},
		mixins: [MescrollMixin],
		data() {
			return {
				downOptions: {
					use: true,
					// 不自动加载
					auto: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					// 是否启用上拉加载
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: '/static/icon/icon_up2top.png',
						right: '20px',
						bottom: '60px',
						width: '40px',
						height: '40px',
						radius: '0px',
					}
				},
				queryForm: {
					page: 1,
					size: 12
				},
				// 数据列表
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,

			}
		},
		created() {},
		methods: {
			getUrl(){
				switch (this.typeId) {
					case '1':
						return 'joinedList';
						break;
					case "2":
						return 'adminList';
						break;
					case "3":
						// url = 'joinedList';
						return '';
					default:
						return ''
				}
			},
			// 获取话题
			getTopicList() {
				this.queryForm = {
					page: 1,
					size: 12
				}
				let url = this.getUrl();
				this.loading = true
				this.$httpApi.baseArticleGet('user/topic/' + url, this.queryForm).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多数据
			loadMoreData() {
				if(this.loading || this.noMore){
					return
				}
				let form = {
					page: this.queryForm.page + 1,
					size: this.queryForm.size,
				}
				let url = this.getUrl();
				this.loading = true
				this.$httpApi.baseArticleGet('user/topic/' + url,form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						if(data.data.records && data.data.records.length > 0){
							this.queryForm.page += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					mescroll.endErr()
					this.loading = false
				})
			},
			// 无数据时提示词
			getNoDataText() {
				switch (this.typeId) {
					case '1':
						return '没有加入任何话题哦';
					case "2":
						return '没有管理的话题';
					default:
						return '没有浏览话题'
				}
			},
			// 话题详情
			toTopicDetail(id){
				uni.navigateTo({
					url: '/pages/topic/topicDetail?id='+id
				});
			},
			// 下拉刷新
			downBack(page) {
				if(this.loading){
					return
				}
				this.getTopicList()
			},
			/**
			 * 上拉加载的回调
			 */
			upBack(page) {
				if (!this.loading && !this.noMore) {
					this.loadMoreData()
				}
			},
			// 详情
			toInfo() {
				uni.navigateTo({
					url: '/pages/category/topic'
				})

			},


		}
	}
</script>

<style lang="scss" scoped>
	.admin_type_box {
		position: relative;
		// display: flex;
		// flex-direction: row;
	}

	.admin_type {
		width: 22px;
		height: 22px;
		position: relative;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		margin-right: -20px;
		z-index: 9;
	}


	// 话题显示样式
	.category_parent_box {
		display: flex;
		flex-flow: column;
		padding: 4px 15px;
		background-color: #FFFFFF;
		border-bottom: red;
	}

	.category_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	// 话题图片
	.category_image {
		width: 54px;
		height: 54px;
		border-radius: 10px;
		margin-top: 4px;
		margin-right: 10px;
		z-index: 8;
	}

	// 话题信息
	.category_info_box {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	// 话题名称
	.category_title {
		flex: 1;
		font-size: 16px;
		line-height: 18px;
		color: #333333;
		margin-top: 12px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.category_count {
		color: #8a8a8a;
		font-size: 13px;
		margin-bottom: 5px;
	}










	.loadmore-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		background-color: #FEFEFE;
	}

	.refresh-img {
		height: 90px;
		width: 120px;
	}
</style>
